人來就好了，何必還帶月餅與柚子？月餅是給嫦娥的、柚子是給兔子的。

原本在一般頁面要製造一些簡單的動畫效果，只要掌控 class 和 Css 就好了，但是如果要在框架內做這些動態效果，如何做？

在 Vue 裡有它的特殊做法，必須把享有動態效果的元素，以<transition>的標籤包起來，並給予一個name的屬性，然後在 CSS 裡，以這個name來作為 class 的名稱，並加上動畫不同時期的後綴，來達到動態效果。

先來看一下 Codepen VueJs Transitioning Single Elements/Component 過渡與動畫效果

我們先來看一張官方上的示意圖：

要指定進出場的樣式需要搭配 Vue 指定的後綴詞，進、出場個分三個階段
進場：

再依照每個過程，指定不同的效果。而表中的v是在沒有給<transition>名字的時候，如果有給name，則把v用我們給的name替換就好了。

淡入淡出的過度效果 Transition

以淡入淡出的效果來說，在 HTML 需要先將<transition>把我們要做動態效果的元素包住，例如我們希望點一個按鈕，讓文字淡入淡出切換，就可以寫成：

<div id="app1">
  <!-- 將字慢慢消失、透明度0 -->
  <button @click="show = !show">Switch1</button>
  <transition name="fade">
    <!-- <p v-show="show">Hello Paris</p> -->
    <p v-if="show">Hello Paris</p>
  </transition>
</div>

在文字的<p>標籤內，我們可以給v-if或v-show，這兩個效果是一樣的。

Vue 實例的部分

const vm1 = new Vue({
        el: '#app1',
        data: {
          show: true
        }
      });

然後在 CSS 裡依上述規則指定，在進場時透明度為 0 漸變為 100，而出場則反之。而按鈕則控制進出場的切換。

  /*指定進場*/
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 1s;
  }
  /*指定出場*/
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

動畫效果的放大縮小 Animation

我們也可以以動畫的方式來將組件變大變小與出場，也是一樣使用 Enter 和 Leave 的三個階段，分別設定。
CSS 的部分

/* 使用Animation 動畫 */
      .bounce-enter-active {
        animation: bounce-in 1s;
      }
      .bounce-leave-active {
        animation: bounce-in 1s reverse;
      }
      @keyframes bounce-in {
        0% {
          transform: scale(0);
        }
        50% {
          transform: scale(1.5);
        }
        100% {
          transform: scale(1);
        }
      }

HTML 部分
因為文字段落<p>標簽是行內元素，所以放大縮小會以整行的大小來算，所以會看不出效果，最好將這段改成display: inline-block就可比較清出的看出變化效果。

<!-- Animation 動畫 -->
<div id="app4">
  <button @click="show = !show">Toggle show</button><br />
  <transition name="bounce">
    <p v-if="show" style="display: inline-block">Hello Tainan</p>
  </transition>
</div>

Vue 實例的部分

const vm4 = new Vue({
  el: '#app4',
  data: {
    show: true,
  },
});

發現原本可以簡單在 Css 裡做出的的動畫效果，在框架裡做還是有些綁手綁腳，如果讓這些效果更容易操控，得要先了解 Vue 是怎麼處理這些效果，在官網的解釋算是蠻清楚的，但當自己要做一些簡單的圖片入場效果，就開始感到有點綁手綁腳，有點可惜。

如果對此部分有興趣的話，除了可以看看官方解釋，也推薦「Summer。桑莫。夏天」的部落格，至少比較親和。

Transitioning Single Elements/Components
官方文件：進入/離開 & 列表過渡 — Vue.js
Vue.js: 樣式與漸變 Transitions | Summer。桑莫。夏天
Vue.js: 進階過渡效果 | Summer。桑莫。夏天

每日一句法文有益身心：Bonne fête de la Lune ! --> 繃.費ㄊㄛ.得拉率呢！ --> 中秋節快樂！ ps. 中秋節另一種說法是照字面上翻：La fête de la Mi-Automne